<template>
  <div class="kaiwa-main-con">
    <div class="kaiwa_title">
      <span>开挖分析</span>
    </div>
    <div class="tootipText">
      <div class="tooltipbg"></div>
      <span>请在地图上按照逆时针框选范围</span>
    </div>
    <div class="btnGroup1">
      <div
        :class="[isKaiWaActive ? 'kaiwaBtnActive' : 'kaiwaBtnUnactive']"
        @click="getPosition('Polygon')"
      >
        <span>开挖范围</span>
      </div>
    </div>
    <div class="tootipText1">
      <span class="i_danwei">开挖高度</span>
      <div class="input_con">
        <el-input
          v-model="kwheightdata"
          placeholder="请输入开挖高度"
          size="small"
          clearable
        ></el-input>
      </div>
      <div class="i_danwei">米</div>
      <!-- <div class="tooltipbg"></div> -->
      <!-- <span>请在地图上按照逆时针框选范围</span> -->
    </div>

    <div class="btnGroup" v-show="isKaiWaActive">
      <div class="handleBtn" @click="restexcavationAnalysis()">
        <span>重置</span>
      </div>
      <div class="clearResult" @click="excavationAnalysis()">
        <span>开挖分析</span>
      </div>
    </div>
    <!-- <div class="kaiwa_form">
      <button @click="getPosition('Polygon')">开挖范围</button>
      <button @click="excavationAnalysis(false)">清除</button>
      <button @click="excavationAnalysis(true)">地形开挖</button>
    </div> -->

    <div class="kaiwa_result" v-show="isShowResult">
      <!-- <div class="kaiwa_result_line"></div> -->
      <div class="kaiwa_result_title">
        <span>查询结果</span>
      </div>
      <div class="resultContent">
        <div class="resultTabs">
          <div
            class="guanxianResult"
            :class="resultType == '0' ? 'resultActive' : ''"
            @click="handleClickResult('0')"
          >
            管线
          </div>
          <div
            class="jiancedianResult"
            :class="resultType == '1' ? 'resultActive' : ''"
            @click="handleClickResult('1')"
          >
            监测点
          </div>
        </div>

        <div class="guanxianList" v-show="resultType == '0'">
          <div class="resultItemContent">
            <div class="resultItem" v-for="(item, i) in dataline" :key="i">
              <span>{{ i }}.{{ item.properties.name }} </span>
            </div>
          </div>
        </div>
        <div class="jiancedianList" v-show="resultType == '1'">
          <div class="resultItemContent">
            <div class="resultItem" v-for="(item, i) in datapoint" :key="i">
              <span v-if="item.properties.sttp!=''">{{ i }}.编号:{{ item.properties.bh }} </span>
              <!-- <span>{{ i }}.编号:{{ item.id }} </span> -->
            </div>
          </div>
        </div>
        <!-- {{dataline}} -->
        <!-- {{datapoint}} -->
      </div>
      <!-- <div style="color: #ffffff;">
        管线
        <br>
        <ul v-for="(item,i) in dataline" :key="i">
          <li> <span>{{item.properties.name}} </span> <span>{{item.properties.p_name}}
            </span><span>{{item.properties.UserID}}</span>
          </li>
        </ul>
        监测点
        <br>
        <ul v-for="(item,i) in datapoint" :key="i">
          <li> <span>{{item.properties.device_id}} </span> <span>{{item.properties.address__1}}</span></li>
        </ul>
      </div> -->
    </div>
  </div>
</template>

<script>
import Bus from "@/js/EventBus";
import { getBoxPointData, getBoxLineData } from "@/api/http";
export default {
  name: "KaiWaAnalysis",
  components: {},
  data() {
    return {
      valueMultiple: [],
      dataline: null,
      datapoint: null,
      isKaiWaActive: false,
      isShowResult: false,
      resultType: 0,
      positions: null,
      kwheightdata:50,
    };
  },
  // watch:{
  //   kwheightdata(newval,oldval){
  //     // console.log(newval)
  //   }
  // },
  mounted() {
    // Bus.$on("kjcxshujuline", (e) => {
    //   this.dataline = e

    // });

    // Bus.$on("kjcxshujupoint", (e) => {
    //   this.datapoint = e

    // });
    Bus.$on("positions", (e) => {
      // this.datapoint = e
      console.log(e, "==============11=======================");
      this.positions = e;
      this.isKaiWaActive = true;
      // this.gohome(e);
    });
  },
  methods: {
    getPosition(type) {
      // Bus.$emit("getPosition", type);
      Bus.$emit(type, true, true);
    },
    // =====================================================挖方分析===================================================
    excavationAnalysis() {
      let pos = [];
      this.positions.forEach((element) => {
        pos.push([element.lng + " " + element.lat]);
        // pos.push(element.lat)
      });
      Bus.$emit("kwfx", true, this.positions,this.kwheightdata);
      this.isShowResult = true;
      let linearrData = this.getPolyognDataLine(pos);
      linearrData.then((res) => {
        this.dataline = res;
        this.dataline.forEach((element) => {
          let idData = {
            UserID: element.properties.UserID,
          };
          Bus.$emit("addlinecolor", JSON.stringify(idData));
        });
      });
      // 查询阀门数据
      let pointarrData = this.getPolyognDataPoint(pos);
      pointarrData.then((res) => {
        this.datapoint = res;
        console.log(res, "eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee");
      });
    },
    restexcavationAnalysis() {
      this.dataline = [];
      this.datapoint = [];
      this.isShowResult = false;
      this.isKaiWaActive = false;
      Bus.$emit("Clear", true);
      // Bus.$emit("removedraw", true);
      Bus.$emit("removealllinecolor", true);
      Bus.$emit("kwfx", false);
    },
    // ===========================================获取空间面查询数据==========================================
    async getPolyognDataLine(pos) {
      let that = this;
      // console.log(pos, '==========pos================')
      // 构造空间筛选
      let params = `INTERSECTS(the_geom,SRID=4326;POLYGON((${pos})))`;
      // 请求接口
      const { features: res } = await getBoxLineData(params);
      // const { features: res1 } = await getBoxPointData(params);
      // console.log(res)
      // console.log(features)
      if (!res) {
        return;
      } else {
        return res;
      }
    },
    async getPolyognDataPoint(pos) {
      let that = this;
      // console.log(pos, '==========pos================')
      // 构造空间筛选
      let params = `INTERSECTS(the_geom,SRID=4326;POLYGON((${pos})))`;
      // 请求接口
      // const { features: res } = await getBoxLineData(params);
      const { features: res } = await getBoxPointData(params);
      if (!res) {
        return;
      } else {
        return res;
      }
    },
    handleClickResult(value) {
      this.resultType = value;
    },
  },
};
</script>

<style lang="scss" scoped>
.kaiwa-main-con {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 301px;
  height: 712px;
  background: url("../../assets/rightMenu/selectInfo/selectInfo_bg.png");
  background-size: 100% 100%;
}

.btnGroup1 {
  padding: 0 30px 0px 30px;

  .handleBtn,
  .clearResult {
    width: 100px;
    height: 28px;
    background: url(../../assets/panelTree/btn-uncheck.png);
    text-align: center;
    margin: 10px 0 0 10px;
    cursor: pointer;

    span {
      font-family: SourceHanSansCN-Medium;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 28px;
      letter-spacing: 1px;
      color: #fff;
    }
  }
}

.btnGroup {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 10px 20px;
  text-align: center;

  .handleBtn,
  .clearResult {
    width: 100px;
    height: 28px;
    background: url(../../assets/panelTree/btn-uncheck.png);
    text-align: center;
    margin: 10px 0 0 10px;
    cursor: pointer;
  }

  span {
    font-family: SourceHanSansCN-Medium;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 1px;
    color: #fff;
  }
}

.choseGuanXianResult {
  margin: 12px 30px 0 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  span {
    font-family: SourceHanSansCN-Regular;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 24px;
    letter-spacing: 0px;
    color: #daf0ff;
  }

  div {
    width: 13px;
    height: 17px;
    background: url(../../assets/panelTree/delete.png);
    // margin: 0 20px 0 10px;
  }
}

.kaiwa_title {
  width: 280px;
  height: 35px;
  box-sizing: border-box;
  background: url("@/assets/panelTree/dtml_bg_title.png") no-repeat;
  font-family: SourceHanSansCN-Regular;
  font-size: 18px;
  background-size: 100% 100%;
  text-align: left;
  padding-left: 50px;
  line-height: 34px;
  // background-color: red;
  margin: 10px 0 0 10px;
}

.kaiwa_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  color: #c8e9ff;
}

.kaiwa_result_title {
  width: 300px;
  height: 16px;
  background: url("../../assets/rightMenu/selectInfo/monitor_form_title.png")
    0px 2px no-repeat;
  text-align: center;
  color: #00baff;
  margin-bottom: 20px;
}

.kaiwa_result_title span {
  font-family: SourceHanSansCN-Regular;
  font-size: 14px;
  line-height: 12px;
}

.kaiwa_result {
  flex: 1;
  margin-top: 10px;
}

.kaiwa_result_line {
  width: 289px;
  height: 1px;
  background: url(../../assets/rightMenu/selectInfo/boundary_line.png);
  background-size: 100% 100%;
  margin-bottom: 20px;
}

::v-deep {
  .el-form-item__label {
    font-family: SourceHanSansCN-Regular !important;
    font-size: 14px !important;
    line-height: 44px !important;
    color: #daf0ff !important;
    padding: 0 0 0 16px !important;
  }
}
.tootipText1{
  padding: 10px 20px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .input_con{
    width: 50%;
  }
}
.tootipText {
  display: flex;
  flex-direction: row;
  padding: 10px 20px 0 20px;
  align-items: center;

  .tooltipbg {
    width: 16px;
    height: 16px;
    background: url("@/assets//panelTree/tooltip.png");
    margin-right: 10px;
    background-size: 98% 98%;
  }

  span {
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 1px;
    color: #95b0c2;
  }
}

.kaiwaBtnUnactive {
  width: 100px;
  height: 28px;
  background: url("@/assets/panelTree/btn-uncheck.png");
  text-align: center;
  // margin: 10px 0 0 10px;
  cursor: pointer;

  span {
    font-family: SourceHanSansCN-Medium;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 1px;
    color: #fff;
  }
}

.kaiwaBtnActive {
  width: 100px;
  height: 28px;
  background: url("@/assets/panelTree/btn-check.png");
  text-align: center;
  // margin: 10px 0 0 10px;
  cursor: pointer;

  span {
    font-family: SourceHanSansCN-Medium;
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 28px;
    letter-spacing: 1px;
    color: #00baff;
  }
}

.resultContent {
  .resultTabs {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 18px 0;
  }

  .guanxianResult,
  .jiancedianResult {
    font-family: SourceHanSansCN-Medium;
    font-size: 12px;
    font-weight: bold;
    font-stretch: normal;
    line-height: 22px;
    letter-spacing: 0px;
    width: auto;
    text-align: center;
    margin: 0 10px;
    color: #c9e9ff;
  }

  .resultActive {
    border-bottom: solid 2px #00baff;
    color: #00baff;
  }

  .guanxianList,
  .jiancedianList,
  .YingXiangQuYuList {
    padding-left: 20px;
    overflow-y: auto;
    height: 400px;
    margin-right: 10px;

    .resultItemContent {
      .resultItem {
        cursor: pointer;
      }

      span {
        font-size: 12px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 28px;
        letter-spacing: 1px;
        color: #95b0c2;
      }
    }

    &::-webkit-scrollbar {
      width: 4px;
      height: 1px;
      background: rgba(9, 85, 133, 0.8);
      display: block;
      border-radius: 3px;
    }

    /*滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #052149;
    }

    /*滚动条里面轨道*/
    &::-webkit-scrollbar-track {
      border-radius: 3px;
      background: transparent;
    }
  }
}
.i_danwei {
  color: #c9e9ff;
}
</style>
